import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import viteSvgIcons from 'vite-plugin-svg-icons'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import viteCompression from 'vite-plugin-compression'
import AutoImport from 'unplugin-auto-import/vite'
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
// 这里我使用一个vite插件：vite-plugin-theme-preprocessor
// 一个vite v2.0+插件，用于实现多个 less、sass 变量文件编译出多主题的 css，使得基于less、sass以及css modules的主题样式在线动态切换变得很简单
import themePreprocessorPlugin from '@zougt/vite-plugin-theme-preprocessor'
// eslint-disable-next-line @typescript-eslint/no-var-requires
const markdown = require('vite-plugin-markdown')
import { resolve } from 'path'

export default ({ mode }) => {
  return defineConfig({
    optimizeDeps: {
      // 排除 browser-utils.js 在vite的缓存依赖 这个配置必须加上 清除缓存避免多个主题切换实效问题
      exclude: ['@zougt/vite-plugin-theme-preprocessor/dist/browser-utils']
    },
    plugins: [
      vue(),
      markdown.plugin({
        mode: ['html', 'vue']
      }),

      themePreprocessorPlugin({
        less: {
          // 各个主题文件的位置
          // 我们定义了三个主题分别是：plan-a 与 plan-b plan-c以及对应得主题文件得位置。
          multipleScopeVars: [
            {
              scopeName: 'plan-a',
              path: resolve('src/theme/default.less')
            },
            {
              scopeName: 'plan-b',
              path: resolve('src/theme/pink.less')
            },
            {
              scopeName: 'plan-c',
              path: resolve('src/theme/skyblue.less')
            }
          ]
        }
      }),

      viteCompression(),
      vueSetupExtend(), //借助插件 vite-plugin-vue-setup-extend 可以直接在 script 标签上定义 name
      viteSvgIcons({
        iconDirs: [resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]'
      }),
      AutoImport({
        //通过unplugin-auto-import 实现自动导入，无需 import 即可在文件里使用Vue的API
        dts: './auto-imports.d.ts', // 生成配置文件，如果是ts项目，通常我们会把声明文件放在根目录/types中，注意，这个文件夹需要先建好，否则可能导致等下无法往里生成auto-imports.d.ts文件
        imports: ['vue', 'vue-router', 'pinia'],
        eslintrc: {
          enabled: false, // 默认 false, true 启用。生成一次就可以，避免每次工程启动都生成，一旦生成配置文件之后，最好把enable关掉，即改成false。否则这个文件每次会在重新加载的时候重新生成，这会导致eslint有时会找不到这个文件。当需要更新配置文件的时候，再重新打开
          filepath: './.eslintrc-auto-import.json', // 生成json文件,可以不配置该项，默认就是将生成在根目录
          globalsPropValue: true
        }
      }),
      Components({
        resolvers: [
          AntDesignVueResolver({
            importStyle: 'less' // 一定要开启这个配置项
          })
        ]
      })
    ],
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            // 在这里自定义主题色等样式
            // 将其删掉或注释掉，因为它的优先级比较高 会覆盖我们自定义的主题
            // hack: `true; @import (reference) "${resolve('src/theme/style.less')}";`
          },
          javascriptEnabled: true
        }
      }
    },
    resolve: {
      alias: {
        '@': resolve(__dirname, './src')
      }
    },
    base: loadEnv(mode, process.cwd()).VITE_PUBLIC_PATH,
    server: {
      port: 6464,
      open: true,
      cors: true
    }
  })
}
